<!-- 前端模板如下: -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>layui</title>
  <!-- 引入 layui.css -->
  <link href="{{ url_for('static', filename='lib/layui/css/layui.css')}}" rel="stylesheet">
</head>
<body>
<!-- 你的 HTML 代码 -->
<h1 style="text-align: center;color: #2f363c;margin-bottom: 20px;">设备报警统计</h1>

<form class="layui-form layui-row layui-col-space5">
<!-- <div class="layui-col-md2">
    <div class="layui-input-wrap">      
	  <select name="module" lay-filter="aihao">
	    {% if equipments %}
	    {% for equipment in equipments %}
	    <option value="{{equipment.module}}">{{equipment.module}}</option>
	    {% endfor %}
	    {% endif %}
	    <option value=""></option>
	    <option value="0">小组1</option>
	    <option value="1" selected>小组2</option>
	    <option value="2">小组3</option>
	    <option value="3">小组4</option>
	    <option value="4">小组5</option>
	  </select>
    </div>
  </div> -->
<!--  <div class="layui-col-md2">
    <div class="layui-input-wrap">      
  	  <select name="name" lay-filter="aihao">
  	    {% if equipments %}
  	    {% for equipment in equipments %}
  	    <option value="{{equipment.name}}">{{equipment.name}}</option>
  	    {% endfor %}
  	    {% endif %}
  	  </select>
    </div>
  </div> -->
<div class="layui-col-md2">
    <div class="layui-input-wrap">
      <div id="demo1" autocomplete="off" name="test1" class="xm-select-demo"></div>
    </div>
  </div>
  <div class="layui-col-md2">
    <div class="layui-input-wrap">
      <div id="demo2" autocomplete="off" name="demo2"  class="xm-select-demo"></div>
    </div>
  </div>
  
  <div class="layui-inline" id="ID-laydate-range">
  <div class="layui-col-md3">
    <div class="layui-input-wrap">
      <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-date"></i>
      </div>
      <input type="text" autocomplete="off" id="ID-laydate-start-date" name="start_date" class="layui-input" placeholder="开始日期">
    </div>
  </div>
  <div class="layui-col-md3">
    <div class="layui-input-wrap">
      <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-date"></i>
      </div>
      <input type="text" autocomplete="off" id="ID-laydate-end-date" name="end_date" class="layui-input" placeholder="结束日期">
	</div>
  </div>
  </div>
  <div class="layui-col-md2">
    <div class="layui-input-wrap">
      <select name="level">
            <option value="">严重度</option>
            <option value="0">普通</option>
            <option value="1">严重</option>
      </select>
    </div>
  </div>
  <div class="layui-col-md2">
    <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
    <button type="reset" id="reset" class="layui-btn layui-btn-primary">清空</button>
  </div>
</form>


<!-- <div class="layui-card">
     <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
     <div class="layui-card-body">
         <div id="echarts-records" style="width: 100%;min-height:500px"></div>
     </div>
</div> -->
  
<table class="layui-hide" id="test" lay-filter="test"></table>

<!-- 引入 layui.js -->
<!-- <script src="{{ url_for('static', filename='jquery-3.5.1.min.js') }}"></script> -->
<script src="{{ url_for('static', filename='lib/layui/layui.js') }}"></script>
<script src="{{ url_for('static', filename='js/xm-select.js') }}"></script>
<script>
  layui.config({
        version: 1,
        base: 'static/js' //这个就是你放Echart.js的目录
    }).use(['layer', 'echarts','form'],function () {
      var table = layui.table;
      var $ = layui.$;
      var layer = layui.layer;
      var echarts = layui.echarts;
	  var laydate = layui.laydate;
	  var form = layui.form;
	  
	  
	  // 搜索提交
	  form.on('submit(search)', function(data){
	    var field = data.field; // 获得表单字段
		console.log(field);
	    table.reload('test', {
	      page: {
	        curr: 1, // 重新从第 1 页开始
	      },
	      where: field, // 搜索的字段
	    });
	    return false; // 阻止默认 form 跳转
	  });  
	  
	  
	  
	  $.getJSON("/getalarmlist",function(d){
		  console.log("测试下拉列表:",d);
		  if(d.code == 0){
			  console.log("再来测试下拉列表:",d);
			  var demo1 = xmSelect.render({
			  	el: '#demo1',
				filterable: true,
				tips: '请输入module',
			  	prop: {
			  		name: 'module',
			  		value: 'module',
			  	},
				radio: true,
				name: 'module',
			  	data: d.data
			  })
			  $("#reset").click(function(){
				  demo1.setValue([])
			  });	  
		  }
		  else{
			  layer.msg(d.msg)
		  }
	  })
	  
	  
	  $.getJSON("/getequipmentlist",function(d){
	  		  console.log("测试设备下拉列表:",d);
	  		  if(d.code == 0){
	  			  console.log("再来测试设备下拉列表:",d);
	  			  var demo2 = xmSelect.render({
	  			  	el: '#demo2',
					filterable: true,
					tips: '请输入设备id',
	  			  	prop: {
	  			  		name: 'name',
	  			  		value: 'name',
	  			  	},
					radio: true,
					name: 'equipment',
	  			  	data: d.data
	  			  })
				  $("#reset").click(function(){
				  	  demo2.setValue([])
				  });
						  
	  		  }
	  		  else{
	  			  layer.msg(d.msg)
	  		  }
	  })

	  laydate.render({
	      elem: '#ID-laydate-range',
	      range: ['#ID-laydate-start-date', '#ID-laydate-end-date']
	  });


      //头部工具栏
      table.on('toolbar(test)', function(obj){
        let layEvent = obj.event;
        if( layEvent == 'additem'){
          //添加事件
          layer.open({
              title:"添加报警记录",
              type:2,
              content:'/api/equipment/add',
              area: ['500px', '400px'],
			  end: function(){
				  table.reload("test")
			  }
          });

        }else if( layEvent == 'batchdelete'){
          //批量删除
          let id = obj.config.id;
          let checkStatus = table.checkStatus(id);
          let list = checkStatus.data
		  
          if (list && list.length==0){
              layer.msg("请选择要删除的数据");
          }else{
              layer.confirm('确定删除吗？',{btn: ['确定','关闭']},function(index){
                let arr = [];
                for (let i = 0; i < list.length; i++) {
                  arr.push(list[i].id)
                }
                var ids=JSON.stringify(arr);
                $.ajax({
                  url: '/api/equipment/batchdelete',
                  type: 'POST',
                  //data:data_id,
                  data: {"ids":ids},
                  success: function(){ 
                      layer.msg("删除成功");
                      table.reload('test');
                      myChart.setOption(option, true); 
                  },
                })
                //关闭提示框
                layer.close(index);
              });            
          }
        }
      });  
      //单元格事件处理
      table.on('tool(test)', function(obj){
        let layEvent = obj.event;
		console.log("obj.data.id:",obj.data.id)
        if(layEvent == 'delete'){
            //删除
            layer.confirm('确定删除吗？',{btn: ['确定','关闭']},function(index){
                  //let equipmentId = obj.data.id
                   $.ajax({
                      url: '/api/equipment/delete/'+ obj.data.id,
                      type: 'POST', 
                      success: function(){
                         layer.msg("删除成功"); 
                         table.reload('test');
                         myChart.setOption(option, true);  
                      }
                   });
                   //关闭提示框
                   layer.close(index);
            });
        }else if(layEvent == 'edit'){
			//更新事件
			layer.open({
			    title:"更新报警记录",
			    type:2,
			    content:'/api/equipment/edit/'+ obj.data.id,
			    area: ['500px', '400px'],
				end: function(){
					table.reload("test")
				},
				success: function(layero, index, that){
				    //获取弹出层jquery对象
					let body = layer.getChildFrame('body', index);
					// 给 iframe 页中的某个输入框赋值
					body.find('#id').val(obj.data.id);
					body.find('#module').val(obj.data.module);
					body.find('#name').val(obj.data.name);
					body.find('#create_time').val(obj.data.create_time)
					body.find('#value').val(obj.data.value);
					
					
				  }
				
			});
		};
      });

      // 已知数据渲染
      table.render({
          elem: '#test',
          id: 'test',  
          url: '/api/equipment',
          title:'设备报警统计',
          toolbar:`
            <div>
              <button type="button" lay-event="batchdelete" class="layui-btn layui-btn-sm layui-bg-orange">批量删除</button>
              <button type="button" lay-event="additem" class="layui-btn layui-btn-sm layui-bg-green">添加</button>
              
            </div>
          `,
          page:true,
          // page:{
          //   limit:5,
          //   limits:[5,10,15,20],
          //   prev:"上一页",
          //   next:"下一页",
          // },
          cols: [[   // 标题栏
                  {type: 'checkbox', fixed: 'left'},
                  {title: 'id', field: 'id', hide:true},
                  {title: '组别', field: 'module', sort: true},
                  {title: '设备ID', field: 'name',sort: true},
                  {title: '报警日期', field: 'create_time',sort: true},
                  {title: '报警次数', field: 'value',sort: true},
                  {
                    title: '严重度',
                    sort: true,
                    templet: function(d){
                      return d.value>300?'<span class="layui-badge">严重</span>':'<span class="layui-badge layui-bg-green">普通</span>'
                    }
           
                  },
                  {
                    title: '操作',
                    templet: function(d){
                      let s = '<button type="button" lay-event="edit" class="layui-btn layui-btn-xs layui-btn-normal">修改</button>'
                      s+= '<button type="button" lay-event="delete" class="layui-btn layui-btn-xs layui-bg-orange">删除</button>';
                      return s
                    }
           
                  }
          ]]
      });

      var myChart = echarts.init(document.getElementById('echarts-records'));
      myChart.setOption({
            /* backgroundColor: '#2c343c',
            textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }, */
            tooltip: {//提示框
                trigger: 'item',
                formatter: function (arg) {
                                //console.log(arg);
                                return arg.name + ' 报警 ' + arg.value + " 次" +'\n'+ arg.percent + "%"
                },
            },
            legend: {//图例及筛选的位置
                orient: 'vertical',
                left: 'left'
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center:['70%', '50%'],
                    data:[
                        {% for equipment in equipments%}
                        {value:{{equipment.value}}, name:'{{equipment.name}}'},
                        {% endfor %}
                    ],
                    itemStyle: {
                        emphasis: {//鼠标放上去时阴影
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {//饼图文字的显示
                        show: true, //默认 显示文字
                        normal: {
                            formatter: function (arg) {
                                //console.log(arg);
                                return arg.name + ' 报警 ' + arg.value + " 次" +'\n'+ arg.percent + "%"
                            },
                        }
                    },

                }
            ]
        })




  });
</script>
</body>
</html>